<template>
  <div class="shangjia-list">
          <ul class="list_container" v-if="list">
              <li v-for="item in list" :key="item.id" class="list_li" @click="onShop(item)">
                <section class="item_left">
                  <img :src="item.imgUrl" class="restaurant_img">
                </section>
                <section class="item_right">
                  <div class="item_right_text">
                    <div class="flex">
                      <span class="head-title right_flex_child1">{{item.name}}</span>
                      <span class="span-sm">{{item.distance}}km</span>
                    </div>
                    <div class="flex">
                      <rater v-model="item.point" slot="value" :font-size="15" disabled class="right_flex_child1">
                      </rater>
                      <span class="span-sm">￥{{item.avg}}</span>
                     </div>
                    <div class="flex">
                        <span class="span-sm right_flex_child1" style="color:#999">{{item.typeDesc}}</span>
                        <span class="span-sm">{{item.address}}</span>
                    </div>
                  </div>
                </section>
              </li>
          </ul>
      <div class="search-empty" v-if="list===null">
        <p>没有搜索结果</p>
        <p>换个关键字试试</p>
      </div>
  </div>
</template>
<script>
import { Rater } from 'vux'
export default {
  nane: 'shangjialist',
  components: {
    Rater
  },
  props: {
    list: {
      type: [Array,Object],
      required: false
    }
  },
  methods:{
    onShop(item){
      if(item){
        this.$router.push({path:'/shangjia',query:{title:item.name,id:item.id,point:item.point}})
      }
    }
  }
  
}
</script>
<style scoped>
.search-empty{
  padding: 6rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  -webkit-align-content: center;
  -moz-flex-direction: column;
  -moz-align-items: center;
  -moz-align-content: center;
}
.search-empty p:first-child{
  color: #707070;
  font-size: .8rem;
}
.search-empty p:last-child{
  color: #707070;
  padding: .2rem 0rem;
  font-size: .5rem;
}
.list_container{
  margin-top: .46rem !important;
  overflow-y: auto;
  background-color: #fff;
}

.item_right{
  flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
}
.item_right .flex{
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  line-height: 0.42rem;
}
.right_flex_child1{
  -webkit-box-flex: 1;
  display: -webkit-box;
  -webkit-box-align: start;
  line-height: 0.42rem;
  font-weight: 600;
  margin: 0.1rem 0;
}
.head-title{
  font-size: .5rem;
}
.span-sm{
  font-size: 0.42rem;
  display: -webkit-box;
}
.title_restaurant {
    color: #727272;
    font-size:.5rem;
    padding: 0.3rem 0 0.1rem 0.5rem;
}
.list_li {
    padding: 0.4rem 0.4rem 0.2rem 0;
    margin-left: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
    display: -webkit-flex;
}
.list_li .item_left .restaurant_img {
    width: 3rem;
    height: 2rem;
}
</style>
